<template>
    <div id="seachDialog">
      <a-modal
        title="表格列设置"
        v-model="titleData.show"
        width="450px"
        style="overflow:hidden"
        @cancel="handleClose">
        <el-row style="padding-right:40px;width:460px;height:580px;overflow-y:auto">
            <el-col :span="24">
              <el-row style="margin-bottom:6px">
                <el-col :span="14" style="padding-left:20px">字段</el-col>
                <el-col :span="6" style="padding-left:4px">显示</el-col>
                <el-col :span="4" style="padding-left:4px">排序</el-col>
              </el-row>
                 <draggable v-model="dataList" @update="datadragEnd" :options = "{animation:200}">
                    <transition-group>
                        <el-row class="title-row" style="padding: 7px 0 7px 5px;" v-for="(item,index) in dataList" :key="item.text">
                           <el-col :span="14">
                              <a-icon type="bars" />
                              {{item.text}}</el-col>
                            <el-col :span="6">
                              <a-checkbox v-model="item.checked"></a-checkbox>
                            </el-col>
                            <el-col :span="4">
                              <a-icon style="cursor:pointer" type="arrow-up" @click="handleUp(index)"/>
                              <a-icon style="cursor:pointer;margin-left:5px" type="arrow-down" @click="handleDown(index)"/>
                            </el-col> 
                      </el-row>
                    </transition-group>
                </draggable>
                
            </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" icon="el-icon-money" style="float:left" type="text">恢复默认布局</el-button>
            <el-button size="small" type="primary" @click="handleClose">保存布局</el-button>
            <el-button size="small" @click="handleClose">取消</el-button>
        </span>
       

      </a-modal>
    </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
    props: ['titleData'],
    data() {
        return {
          parames: {
              name: '',
              youxian: '',
              date: ''
          },
          dataList: [
            { id: '1', text: "姓名", checked: true}, 
            { id: '1', text: "年龄", checked: false}, 
            { id: '1', text: "商机", checked: true}, 
            { id: '1', text: "作者", checked: false}, 
            { id: '1', text: "价格", checked: false}, 
            { id: '1', text: "地址", checked: false}, 
            { id: '1', text: "邮箱", checked: false}, 
            { id: '1', text: "密码", checked: true}, 
            { id: '1', text: "语言", checked: true}, 
            { id: '1', text: "框架", checked: false}, 
            { id: '1', text: "js", checked: true}, 
            { id: '1', text: "emall", checked: true}, 
            { id: '1', text: "身份", checked: false}, 
            { id: '1', text: "手机", checked: false}, 
            { id: '1', text: "qq", checked: true}, 
          ],
        };
    },
    computed: {
      
    },
    created() {

    },
    mounted() {
      document.body.ondrop = function (event) {
          event.preventDefault();
          event.stopPropagation();
      }
    },
    watch: {

    },
    methods: {
      datadragEnd (evt) {
        evt.preventDefault();
        // console.log('拖动前的索引 :' + evt.oldIndex)
        // console.log('拖动后的索引 :' + evt.newIndex)
        // console.log(this.dataList)
      },
      handleClose () {
        this.titleData.show = false
      },
      swapArray (arr, index1, index2) {
        arr[index1] = arr.splice(index2, 1, arr[index1])[0];
        return arr;
      },
      handleUp (index) { //上移
        if (index != 0){
            this.swapArray(this.dataList, index, index-1);
        } else{
            this.swapArray(this.dataList, index, this.dataList.length-1);
        }
      },
      handleDown (index) { //下移
        if (index+1 != this.dataList.length){
          this.swapArray(this.dataList, index, index+1);
        } else{
            this.swapArray(this.dataList, index, 0);
        }
      }
    },
    components: {
      draggable
    },
};
</script>

<style>
#seachDialog .el-dialog{
    padding-bottom: 0; 
    overflow-x: hidden;
}
#seachDialog .el-dialog__footer{
    border-top: #f4f4f4 solid 1px;
}
.title-row:hover{
  background: #f9f9f9;
}
</style>
